<template>
	<div class="personnelList personnelLists">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }"><i class="lh lh-ayi fw_100"></i></el-breadcrumb-item>
			<el-breadcrumb-item>财务及数据</el-breadcrumb-item>
			<el-breadcrumb-item>供应商人才报表</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="4">
						<el-button type="default" @click="download()" round size="mini">导出</el-button>
					</el-col>
					<el-col :span="20">
						<el-form :inline="true" class="form-inline fr">
							<el-form-item class="w_120">
								<el-input v-model="s_name" placeholder="姓名"></el-input>
							</el-form-item>
							<el-form-item class="w_120">
								<el-input v-model="s_tel" placeholder="手机号"></el-input>
							</el-form-item>
							<el-form-item class="w_120">
								<el-select v-model="qr_scene_str" placeholder="所属供应商" clearable>
									<el-option
										v-for="item in supplierList"
										:key="item.id"
										:label="item.name"
										:value="item.qr_scene_str"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="date1" class="w_180">
								<el-date-picker
									size="mini"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									default-time="00:00:00"
									placeholder="开始时间"
									v-model="startTime"
									style="width: 100%;"
								></el-date-picker>
							</el-form-item>
							<span style="position: relative; top: 4px;">~</span>
							<el-form-item prop="date2" class="w_180">
								<el-date-picker
									size="mini"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									default-time="23:59:59"
									placeholder="结束时间"
									v-model="endTime"
									style="width: 100%;"
								></el-date-picker>
							</el-form-item>
							<el-button size="mini" type="primary" class="round-right" native-type="button" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>

			<div class="tableMaxBox">
				<template>
					<el-table :data="staffList" stripe>
						<el-table-column prop="id" label="序号" width="50px" align="center">
							<template slot-scope="{ $index }">
								<span>{{ $index + 1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="staff_sn" label="人才编号" align="center"></el-table-column>
						<el-table-column prop="name" label="人才姓名" align="center"></el-table-column>
						<el-table-column prop="mobile" label="人才手机号" align="center"> </el-table-column>
						<el-table-column prop="supplier_name" label="所属供应商" align="center"> </el-table-column>
						<el-table-column prop="first_work_date" label="首次出工日期" align="center"> </el-table-column>
						<el-table-column prop="sum_work_day" label="出工天数" align="center"> </el-table-column>
						<el-table-column prop="sum_work_hour" label="出工时长" align="center"> </el-table-column>
						<el-table-column prop="diff_day" label="连续未出工天数" align="center"> </el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { fetchStaffReport } from '@/api/supplier.js'
import { fetchQrcodeList } from '@/api/staff.js'
export default {
	name: 'PersonnelList',
	data() {
		return {
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			s_name: '',
			s_tel: '',
			qr_scene_str: '', //供应商
			startTime: '',
			endTime: '',
			supplierList: [],
			sn: this.$route.query.sn || '',

			pageNum: 1,
			pageSizeNow: 20,
			total: 0,
			staffList: []
		}
	},
	created() {
		if (!sessionStorage.getItem('manageInfo')) {
			window.location = 'login.html'
			return
		}
	},
	mounted() {
		this.changeQrcodeList()
		this.staffReport()
	},
	methods: {
		// 搜索
		shearchBtn() {
			this.pageNum = 1
			this.staffReport()
		},
		//重置
		resetBtn() {
			this.s_name = ''
			this.s_tel = ''
			this.qr_scene_str = ''
			this.startTime = ''
			this.endTime = ''
			this.sn = ''
			this.staffReport()
		},

		async staffReport() {
			try {
				let res = await fetchStaffReport({
					pageSize: this.pageSizeNow,
					page: this.pageNum,
					sn: this.sn,
					name: this.s_name,
					mobile: this.s_tel,
					qr_scene_str: this.qr_scene_str,
					startTime: this.startTime,
					endTime: this.endTime
				})
				this.total = res.count
				this.staffList = res.list
				console.log(res)
			} catch (err) {
				console.log(err)
			}
		},

		//监听搜索来源下的 招聘者
		async changeQrcodeList() {
			try {
				let ret = await fetchQrcodeList({
					type: 2
				})
				console.log(ret)
				this.supplierList = ret.list
			} catch (err) {
				console.log('error:', err)
			}
		},

		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.staffReport()
		},

		//导出
		download() {
			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				export: 1,
				name: this.s_name,
				mobile: this.s_tel,
				qr_scene_str: this.qr_scene_str,
				startTime: this.startTime,
				endTime: this.endTime,
				sn: this.sn
			}
			let param = $.param(obj)
			window.location.href = this.url + '/supplier/staffReport?' + param
		}
	},
	filters: {}
}
</script>

<style scoped></style>



// WEBPACK FOOTER //
// src/components/supplier/SuoolierReport.vue